<template>
  <div class="home-container" :class="hideLeft ? hideClass : ''">
    <!-- 左侧边栏 -->
    <div class="left-continer el-transition">
      <div class="logo-container">
        <!-- <img src="../assets/img/logo.png" alt="" /> -->
        <span>伴我汽车</span>
      </div>
      <MenuList></MenuList>
    </div>

    <div class="main-container">
      <NavBar></NavBar>
      <div class="app-main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters({
      hideLeft: 'menu/getHideLeft',
      hideClass: 'menu/getHideClass'
    })
  }
}
</script>
<style lang="less" scope>
.home-container {
  height: 100%;
}

.fade-enter-active {
  transition: opacity 1.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.left-continer {
  transition: width 0.28s;
  background-color: #304156;
  height: 100%;
  width: 200px;
  position: fixed;

  .logo-container {
    height: 56px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2b2f3a;
    position: absolute;
    z-index: 1;
    > img {
      height: 36px;
      width: 36px;
    }

    > span {
      width: 94px;
      height: 50px;
      color: #fff;
      padding: 0 5px;
      font-weight: 600;
      line-height: 50px;
      font-size: 14px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      overflow: hidden;
    }
  }

  .el-menu {
    border-right: none;
  }
}

.main-container {
  margin-left: 200px;
  -webkit-transition: margin-left 0.28s;
  transition: margin-left 0.28s;
  .nav-bar-fixed {
    position: fixed;
    width: calc(100% - 200px);
  }

  .nav-bar {
    transition: width 0.28s;
  }

  .tags-view-container {
    height: 34px;
    line-height: 34px;
    background: #fff;
    border-bottom: 1px solid #d8dce5;
    padding: 0 15px;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12),
      0 0 3px 0 rgba(0, 0, 0, 0.04);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);

    .tags-view-item {
      height: 26px;
      line-height: 26px;
      margin: 0 2px;
      cursor: pointer;
    }
  }
}

.app-main {
  padding: 15px;
  padding-top: 84px;
  height: 1800px;
}

.nav-bar {
  height: 50px;
  overflow: hidden;
  position: relative;
  -webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #5a5e66;

  > .nav-bar-left-continer {
    .icon-toggle {
      display: inline-block;
      font-size: 22px;
      padding: 0 15px;
      cursor: pointer;
    }

    .breadcrumb-container {
      display: inline-block;
      font-size: 14px;
      margin-left: 8px;
      margin-bottom: 0;
      font-family: Microsoft YaHei;

      .el-breadcrumb__inner:not(:first) {
        color: #97a8be !important;
      }
    }
  }

  > .nav-bar-right-continer {
    color: #fff;

    .avatar-img {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      vertical-align: middle;
    }
    .avatar-name {
      font-size: 16px;
      font-weight: 500;
      padding: 0 10px;
    }
  }
}

.hide-left-menu {
  .left-continer {
    width: 64px !important;

    > .logo-container {
      > span {
        display: none;
      }
    }
  }
  > .main-container {
    margin-left: 64px;
    > .nav-bar-fixed {
      width: calc(100% - 64px) !important;
    }
  }
}
</style>
